import React, {Fragment, Suspense, lazy} from "react";
import {MuiThemeProvider, CssBaseline} from "@material-ui/core";
import {BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";
import theme from "./theme";
import GlobalStyles from "./GlobalStyles";
import Pace from "./shared/components/Pace";

const BaseBuild = lazy(() => import("./pages/base-build/BaseBuildConsole"));

function App() {
    return (
        <Router>
            {/*Material UI 自定义样式*/}
            <MuiThemeProvider theme={theme}>
                {/*Material UI 提供的一个reset*/}
                {/*ScopedCsseline 对于局部重置可以选择 ScopedCsseline 来包裹子组件*/}
                <CssBaseline/>
                <GlobalStyles/>
                {/*好像是进度条*/}
                <Pace color={theme.palette.primary.light}/>
                {/*Suspense是一种虚拟组件 用作类型标识 Suspense子树中只要存在还没加载的Lazy组件 就会执行fallback里的内容*/}
                {/*支持loading提升*/}
                {/*支持loading聚合*/}
                <Suspense fallback={<Fragment/>}>
                    <Switch>
                        <Route path="/console" component={BaseBuild}/>
                        <Redirect from="/*" to="/console" />
                    </Switch>
                </Suspense>
            </MuiThemeProvider>
        </Router>
    );
}

export default App;
